<template>
  <div style="margin-top: 16px">
    <el-descriptions class="margin-top" :column="1" size="medium" border labelClassName="mail-detail">
      <template slot="extra">
        <el-button type="primary" size="mini" @click="handleChangeMailTask">详情/编辑</el-button>
      </template>
      <el-descriptions-item label="接收者">{{mailTaskForm.to}}</el-descriptions-item>
      <el-descriptions-item label="发送者">{{mailTaskForm.from}}</el-descriptions-item>
      <el-descriptions-item label="主题">{{mailTaskForm.subject}}</el-descriptions-item>
      <el-descriptions-item label="抄送人">{{mailTaskForm.cc}}</el-descriptions-item>
      <el-descriptions-item label="暗送人">{{mailTaskForm.bcc}}</el-descriptions-item>
    </el-descriptions>

    <el-dialog title="邮件配置" :visible.sync="mailModelVisible" width="60%" append-to-body destroy-on-close>
      <el-form :model="mailTaskForm" label-width="100px" size="small" ref="taskFormRef" class="mail-task-form">
        <el-form-item label="接收者" prop="to" :rules="{ required: true, trigger: ['blur', 'change'] }">
          <el-input v-model="mailTaskForm.to" placeholder="邮件的接受者,可以使用逗号分隔多个接受者" clearable class="input-with-select">
            <el-select v-model="mailTaskForm.toType" slot="prepend">
              <el-option v-for="i in Object.keys(typeObject)" :key="i" :label="typeObject[i]" :value="i" />
            </el-select>
          </el-input>
        </el-form-item>
          <el-form-item label="发送者" prop="from">
            <el-input v-model="mailTaskForm.from" placeholder="邮件发送者的地址,如果不提供,会使用默认配置的地址" clearable class="input-with-select">
              <el-select v-model="mailTaskForm.fromType" slot="prepend">
                <el-option v-for="i in Object.keys(typeObject)" :key="i" :label="typeObject[i]" :value="i" />
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="主题" prop="subject">
            <el-input v-model="mailTaskForm.subject" placeholder="邮件的主题" clearable class="input-with-select">
              <el-select v-model="mailTaskForm.subjectType" slot="prepend">
                <el-option v-for="i in Object.keys(typeObject)" :key="i" :label="typeObject[i]" :value="i" />
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="抄送人" prop="cc">
            <el-input v-model="mailTaskForm.cc" placeholder="邮件抄送人,可以使用逗号分隔多个接收者" clearable class="input-with-select">
              <el-select v-model="mailTaskForm.ccType" slot="prepend">
                <el-option v-for="i in Object.keys(typeObject)" :key="i" :label="typeObject[i]" :value="i" />
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="暗送人" prop="bcc">
            <el-input v-model="mailTaskForm.bcc" placeholder="邮件暗送人,可以使用逗号分隔多个接收者" clearable class="input-with-select">
              <el-select v-model="mailTaskForm.bccType" slot="prepend">
                <el-option v-for="i in Object.keys(typeObject)" :key="i" :label="typeObject[i]" :value="i" />
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="邮件类型" prop="html">
            <el-radio v-model="mailTaskForm.mailType" label="text">纯文本</el-radio>
            <el-radio v-model="mailTaskForm.mailType" label="html">HTML</el-radio>
          </el-form-item>
          <el-form-item label="邮件内容" prop="text" v-if="mailTaskForm.mailType === 'text'">
            <el-input v-model="mailTaskForm.text" type="textarea" :rows="2" placeholder="邮件内容(纯文本)" clearable />
          </el-form-item>
          <el-form-item label="邮件内容" prop="html" v-else>
            <editor v-model="mailTaskForm.html" :min-height="192"/>
          </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="mailModelVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="saveMailTask">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "MailTaskPanel",
  props: {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      mailModelVisible: false,
      mailTaskForm: {
        to: '',
        toType: 'string',
        from: '',
        fromType: 'string',
        subject: '',
        subjectType: 'string',
        cc: '',
        ccType: 'string',
        bcc: '',
        bccType: 'string',
        mailType: 'text',
        html: '',
        text: '',
      },
      mailTaskObject: {
        to: '',
        from: '',
        subject: '',
        cc: '',
        bcc: '',
        html: '',
        text: '',
      },
      typeObject: {
        string: "字符串",
        expression: "表达式"
      },
    }
  },
  watch: {
    id: {
      immediate: true,
      handler() {
        this.$nextTick(() => this.resetTaskForm());
      }
    }
  },
  methods: {
    resetTaskForm() {
      const {mailTaskForm} = this;
      // 获取注入字段
      const fieldsList = this.modelerStore.element.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `flowable:Field`) ?? [];
      if (fieldsList && fieldsList.length > 0) {
        fieldsList.forEach(field => {
          mailTaskForm[field.name] = field.string || field.expression;
          mailTaskForm[field.name + `Type`] = field.string ? "string" : "expression";
        })
        mailTaskForm.mailType = mailTaskForm.text ? "text" : "html";
      }
    },

    handleChangeMailTask() {
      this.mailModelVisible = true;
    },

    // 创建扩展属性
    saveMailTask() {
      this.$refs["taskFormRef"].validate((valid) => {
        if (valid) {
          const fieldsList = [];
          for (let key in this.mailTaskObject) {
            const value = this.mailTaskForm[key];
            if (value) {
              const fieldType = this.mailTaskForm[key + `Type`] || "string";
              const fieldConfig = fieldType === "string" ? {name: key, string: value} : {
                name: key,
                expression: value
              };
              const mailFrom = this.modelerStore.moddle.create(`flowable:Field`, fieldConfig);
              fieldsList.push(mailFrom);
            }
          }

          this.updateElementExtensions(fieldsList);
          this.mailModelVisible = false;
        }
      });
    },

    // 更新扩展属性
    updateElementExtensions(extensionList) {
      const extensions = this.modelerStore.moddle.create("bpmn:ExtensionElements", {
        values: extensionList
      });
      this.modelerStore.modeling.updateProperties(this.modelerStore.element, {
        extensionElements: extensions
      });
    },
  },
};
</script>

<style>
.mail-task-form .el-select .el-input {
  width: 100px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.mail-detail {
  width: 80px;
}
</style>
